<!-- 搜索栏 -->
<template>
	<div>
		<div style="display: flex;align-items: center;width: 100%;position: relative;">
			<slot name="left"></slot>
			<uni-search-bar style="flex: 1;" :value="value" :placeholder="placeholder" :focus="focus" :fontSize="themetool.fontSize('small')" height="32" padding="5px 10px 5px 10px" :readonly="!!pagePramas" @click="onClick" @input="onInput" @confirm="onConfirm" @cancel="onCancel"/>
			<div v-if="showMoreSift" class="center" style="margin-right: 10px;" @click="e => $emit('sift', showMoreSift === 2 ? 1 : 2)">
				<IconFont type="sift" size="20" :color="showMoreSift === 2 ? themetool.color.click : themetool.color.lighter"/>
				<div class="center">
					<CaLabel style="line-height: 10px;writing-mode: vertical-rl" text="更多" size="10" :color="showMoreSift === 2 ? themetool.color.click : themetool.color.lighter"/>
					<!-- <CaLabel style="line-height: 10px;writing-mode: vertical-rl" text="筛选" size="10" :color="showMoreSift === 2 ? themetool.color.click : themetool.color.lighter"/> -->
				</div>
			</div>
			<slot v-else name="right"></slot>
			<div v-if="showSearchor" style="position: fixed;top: 0;left: 0;bottom: 0;right: 0;" @click="onClear"/>
			<div v-if="showSearchor" class="selector" :style="[{top: 'calc(100% + 12px)'}]" @click.stop="e => core.common.onStop(e)">
				<div class="arrow" :style="[{top: '-6px', transform: 'rotate(0deg)'}]"/>
				<scroll-view scroll-y :style="[{maxHeight: '480px', padding: '0 5px'}]" @scrolltolower="scrolltolower">
					<div v-if="searchList.length === 0" class="center" style="height: 60px;">
						<slot name="nodata"><CaLabel text="没有数据" size="14" color="#666"/></slot>
					</div>
					<block v-else v-for="(item, index) in searchList" :key="index">
						<slot v-bind="{item, index}">
							<div class="item" :style="[{borderTop: `${index > 0 ? 1 : 0}px solid #E9E9E9`, height: '28px', paddingTop: '10px'}]" @click="onSelect(item, index)">
								<CaLabel :text="dataMap ? item[dataMap.name] : item"/>
							</div>
						</slot>
					</block>
				</scroll-view>
			</div>
		</div>
		<div v-if="pagination" class="space-between" style="padding: 0 10px 5px 10px;">
			<div :style="[{color: themetool.color.lighter, fontSize: themetool.fontSize('smaller')}]">共{{pagination.total}}项，分{{pagination.pageNumber}}页，当前第{{pagination.pageIndex + 1}}页</div>
			<slot name="bottom-right">
				<div style="display: flex;align-items: center;" @click.stop="onSort">
					<IconFont type="desc" size="12" :color="sort === 1 ? themetool.color.main : themetool.color.lighter"/>
					<IconFont type="asc" size="12" :color="sort === 2 ? themetool.color.main : themetool.color.lighter" style="margin-left: -5px;"/>
				</div>
			</slot>
		</div>
	</div>
</template>

<script>
	
	import base from '@/components/index.vue'
	
	export default {
		extends: base,
		/**
		 * confirm执行的参数{
			 keyword: '',
			 pageIndex: 0, // 如果mode是input，滑动到底部翻页时
			 callback: (res) => { // 如果mode是input，则必须要这个回调
				 const {data, map} = res
				 // data: [], 搜索结果
				 // map: {}, 如果data里面元素是对象，就要这个映射规则
			 }
		 }
		 *
		 * select执行的参数{
			 index: // 搜索结果的选择项
			 content: // 传递过来的内容，字符串或者对象
		 }
		 
		 * sift：点击了更多筛选
		 */
		emits: ['input', 'confirm', 'select', 'sort', 'sift', 'click'],
		props: {
			// 搜索值
			value: String,
			/**
			 * 占位字符
			 * 
			 * 如果是数组将上下轮播展示。一般用于热搜
			 */
			placeholder: {
				type: [String, Array],
				default: '请输入关键字搜索'
			},
			/**
			 * 搜索模式
			 * input：输入的时候就搜索
			 * confirm：按搜索确定后再搜索
			 */
			mode: {
				type: String,
				default: 'confirm'
			},
			// 搜索页码
			pagination: Object,
			// 是否显示更多筛选。0或者false，不显示；1或者true，显示未选择状态；2：显示已选择
			showMoreSift: [Boolean, Number],
			// 跳转到搜索页面的参数。存在就表示要跳转到搜索页面
			pagePramas: Object,
			// 是否自定聚焦
			focus: Boolean
		},
		data() {
			return {
				keyword: this.value,
				// 输入搜索的情况下，是否显示搜索结果以供选择
				showSearchor: false,
				// 输入搜索的情况下的数据源数组
				searchList: [],
				// 数据源数组元素是对象时的映射。取name
				dataMap: undefined,
				// 搜索的页码。当拉倒最底下时，会触发下一页
				pageIndex: 0,
				
				// 当前排序。0默认无序；1升序；2降序
				sort: 0,
			}
		},
		computed: {
			themetool() {
				return this.core.theme
			}
		},
		methods: {			
			// 输入文字变化
			onInput(keyword) {
				if (this.mode === 'input') {
					this.keyword = keyword
					this.pageIndex = 0
					this.searchList = []
					if (keyword) {
						this.onSearch()
					} else {
						this.onCancel()
					}
				}
				this.$emit('input', keyword)
			},
			
			// 拉倒最底部，触发下一页
			scrolltolower() {
				thispageIndex += 1
				this.onSearch()
				this.$emit('confirm', {
					keyword, 
					pageIndex: this.pageIndex,
					callback: (res) => {
						this.searchList = this.searchList.concat(res.data)
					}
				})
			},
			
			// 点击了搜索框
			onClick() {
				this.$emit('click')
				if (this.pagePramas) {
					this.core.router.to('搜索页面', {searchParams: this.pagePramas})
				}
			},
			
			// 点击了取消
			onCancel() {
				this.keyword = ''
				this.pageIndex = 0
				this.searchList = []
				this.dataMap = undefined
				if (this.mode === 'confirm') {
					this.onSearch('')
				} else {
					this.showSearchor = false
				}
			},
			
			// 点击了搜索
			onConfirm(e) {
				this.onSearch(e.value)
			},
			
			// 点击了清除
			onClear() {
				this.onCancel()
			},
			
			// 对外回调搜索结果
			onSearch(keyword = this.keyword) {
				this.keyword = keyword
				this.$emit('confirm', {
					keyword, 
					pageIndex: this.pageIndex,
					callback: (res) => {
						// 拿到数据后显示搜索结果
						res.data && res.data.map(item => {
							this.searchList.push(item)
						})
						this.dataMap = res.map
						this.showSearchor = true
					}
				})
			},
			
			/**
			 * 选择了对应的搜索结果
			 */
			onSelect(content, index) {
				this.$emit('select', {
					content, index
				})
				this.onCancel()
			},
			
			// 点击了排序
			onSort() {
				var {sort} = this
				sort ++
				sort %= 3
				var orderBy
				switch (sort){
					case 1:
						orderBy = 'desc'
						break
					case 2:
						orderBy = 'asc'
						break
					default:
						break;
				}
				// 外界调用，数据请求成功之后再改变
				this.$emit('sort', orderBy, () => {
					this.sort = sort
				})
			}
		}
	}
</script>

<style>
	.selector {
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		/* #endif */
		position: absolute;
		left: 0;
		width: 95%;
		margin-left: 2.5%;
		background-color: #FFFFFF;
		border: 1px solid #EBEEF5;
		border-radius: 6px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		z-index: 3;
		padding: 4px 0;
	}
	
	.item {
		/* #ifndef APP-NVUE */
		display: flex;
		cursor: pointer;
		/* #endif */
		line-height: 35px;
		font-size: 14px;
		text-align: center;
		/* border-bottom: solid 1px $uni-border-3; */
		padding: 0px 10px;
	}
	
	.arrow,
	.arrow::after {
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		border-color: transparent;
		border-style: solid;
		border-width: 6px;
	}
	
	.arrow {
		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
		left: 10%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}
	
	.arrow::after {
		content: " ";
		top: 1px;
		margin-left: -6px;
		border-top-width: 0;
		border-bottom-color: #fff;
	}
</style>